<template>
	<div>
		<el-form class="container">
			<el-row :gutter="20">
			  <el-col :span="6">
				  <div class="grid-content bg-purple1">
						<h2>{{list.productName}}</h2>
						<div>产品名称</div>
					</div>
				</el-col>

				<el-col :span="6">
				  <div class="grid-content bg-purple2">
						<h2>{{list.batch}}</h2>
						<div>加工批号</div>
					</div>
				</el-col>

			  <!-- <el-col :span="6">
				  <div class="grid-content bg-purple3">
						<h2>{{list.grade}}</h2>
						<div>品级</div>
					</div>
			  </el-col> -->

				<el-col :span="6">
				  <div class="grid-content bg-purple4">
						<h2>{{list.recallSpec}}</h2>
						<div>规格</div>
					</div>
				</el-col>
			</el-row>
		</el-form>
		<el-form class="container" style="margin-top:20px;" label-width="120px" label-position="right">
			<h3>空码激活</h3>
			<el-upload
			style="float: right;"
				class="upload-demo"
				ref="upload"
				accept=".txt"
				action="https://jsonplaceholder.typicode.com/posts/"
				:before-upload="beforeUpload"
				:default-file-list="this.fileList"
			  >
			  <el-button slot="trigger" size="small" type="primary">导入追溯码</el-button>
			</el-upload>
			<el-row style="margin-top:20px;">
				<el-form-item label="扫描二维码">
					<el-input placeholder="输入追溯码/英文输入法下使用扫描枪扫描输入" v-model="num" style="width:200px">
					</el-input>
					<el-button style="margin-left: 20px;" @click="get">确认</el-button>
				</el-form-item>
				<el-form-item label="追溯码">
					<textarea name="" id="" cols="80" rows="10" disabled v-model="codeList"></textarea>
				</el-form-item>

			</el-row>
		</el-form>
		<el-form>
			<el-form-item class="footerFixed">
			    <el-button type="primary" @click="submitrule('ruleForm')">激活</el-button>
			    <el-button @click="backPage">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import { sub_spacebox_active } from "@/request/api"

	export default {
		data(){
			return{
				list:{},
				num:'',
				codeList:'',
				numList:[],
				fileList:''
			}
		},
		mounted() {
			this.list = this.$route.query.list

		},
		beforeCreate() {
			// 读取文件
			FileReader.prototype.reading = function ({encode} = pms) {
				let bytes = new Uint8Array(this.result);    //无符号整型数组
				let text = new TextDecoder(encode || 'UTF-8').decode(bytes);
				return text;
			};
			/* 重写readAsBinaryString函数 */
			FileReader.prototype.readAsBinaryString = function (f) {
				if (!this.onload)       //如果this未重写onload函数，则创建一个公共处理方式
					this.onload = e => {  //在this.onload函数中，完成公共处理
						let rs = this.reading();
						// console.log(rs);
					};
				this.readAsArrayBuffer(f);  //内部会回调this.onload方法
			};
		},
		methods:{
			beforeUpload(file){
				this.fileList = [file]
				this.read(file);
				return false
			},
			read(f) {
				let rd = new FileReader();
				rd.onload = e => {
				//this.readAsArrayBuffer函数内，会回调this.onload函数。在这里处理结果
					let cont = rd.reading({encode: 'GBK'});
					let  formerData = this.textData;

					if(formerData == "" || formerData == null || formerData == undefined){
						this.textData = cont
					}else{
						this.textData = formerData + cont;
					}
          // console.log(this.textData)
					this.textData = this.textData.split("\r\n")
					for(var i=0;i<this.textData.length;i++){
            var r = this.textData[i].split("=")[1];

            this.numList.push(r);
					}
					this.codeList = this.numList.join(",")
					this.textData = ""
				};
				rd.readAsBinaryString(f);
			},
			get(){
				// this.codeList += "," + this.num
				// this.num = ""
				this.numList.push(this.num)
				// this.codeList = this.codeList.substr(0, this.codeList.length - 1);
				this.num = ""
				this.codeList = this.numList.join(",")
			},
			submitrule(){


				if(this.numList.length > 0){
					if(this.numList.length > this.list.subNumber){
						this.$notify({
							title: '提示',
							message: '追溯码数量不能大于分包数',
							type: 'info',
							duration:1000
						});
					}else{
						let data = {
							subId:this.list.id,
							boxs:this.numList
						}
						sub_spacebox_active(data).then((res)=>{
							this.$notify({
								title: '提示',
								message: '激活成功',
								type: 'success',
								duration:1000
							});
							this.$router.go(-1)
						})
					}

				}else{
					this.$notify({
						title: '提示',
						message: '追溯码不能为空',
						type: 'info',
						duration:1000
					});
				}

			},
			backPage(){
			    this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	.add{
	    background-color: rgba(235, 245, 255, 1);
	    border: 1px dotted lightgray;
	    color: #333;
	    margin: 10px 0 0 0;
	    padding: 10px 0;
	    text-align: center;
	    cursor: pointer;
	  }
	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple1 {
	    background: #409EFF 10000%;
	  }
	  .bg-purple2 {
	    background: #F56C6C 10000%;
	  }
	  .bg-purple3 {
	    background: #67C23A 10000%;
	  }
	  .bg-purple4 {
	    background: #909399 10000%;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 80px;
		color:white;
	  }
	  .grid-content div{
		  text-align: right;
		  font-size:14px;
		  margin-top:4px;
		  padding-right:20px;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
	  h2{
		  color:white;
		  text-align: right;
		  padding-top:20px;
		  padding-right:20px;
	  }
	 .upload-demo{
	 	display:inline-block;
	 	margin-left:20px;
	 }

	 /deep/.el-upload--text{
	 	width:80px;
	 	height:35px;
		border: none;
		width: auto;
		height: auto;
		border-radius: 0;
		float: right;
		margin-right: 10px;
	 }

	 .el-button--primary{

	 	border-color:#DCDFE6;
	 }
</style>
